/**
 * Created by 001 on 2017/11/5.
 */
import React from 'react'
import Header from './components/header'
import Player from './page/player'
import Musiclist from './page/musiclist'
import {MUSIC_LIST} from './config/config';
import { Router, IndexRoute, Link, Route, browserHistory, hashHistory} from 'react-router';
import Pubsub from 'pubsub-js'

let duration = null;
let App = React.createClass({
    getInitialState(){
        return {
            musicList: MUSIC_LIST,
            currentMusicItem: MUSIC_LIST[0],
            progress: '-'
        }
    },
    playMusic(musicItem){
        console.log(musicItem);
        console.log(musicItem.file);
        $("#player").jPlayer('setMedia', {
            mp3: musicItem.file
        }).jPlayer('play');
        this.setState({
            currentMusicItem: musicItem
        })
    },
    playNext(type = 'next'){
        let index = this.findMusicIndex(this.state.currentMusicItem);
        let newIndex = null;
        let musicListLen = this.state.musicList.length
        if (type === 'next') {
            newIndex = (index + 1) % musicListLen;
        } else {
            newIndex = (index - 1 + musicListLen) % musicListLen;
        }
        this.playMusic(this.state.musicList[newIndex])
    },
    findMusicIndex(musicItem){
        return this.state.musicList.indexOf(musicItem);
    },
    componentDidMount(){
        //jPlayer配置简单初始化
        $("#player").jPlayer({
            supplied: 'mp3',
            wmnode: 'window'
        });
        this.playMusic(this.state.currentMusicItem);
        $("#player").bind($.jPlayer.event.ended, (e)=> {
            this.playNext();
        });
        //绑定页面但是返回时候回从新绑定(重复绑定)要记得解绑
        $('#player').bind($.jPlayer.event.timeupdate, (e)=> {
            duration = e.jPlayer.status.duration;//获取音频的总时间
            this.setState({
                progress: e.jPlayer.status.currentPercentAbsolute
            })
        });
        //设置订阅器订阅消息 记得在componentWillUnMount里解绑
        Pubsub.subscribe('DELETE_MUSIC', (msg, musicItem)=> {
            this.setState({
                musicList: this.state.musicList.filter(item=> {
                    return item !== musicItem;
                })
            });
        });
        Pubsub.subscribe('PLAY_MUSIC', (msg, musicItem)=> {
            this.playMusic(musicItem);
        });
        Pubsub.subscribe('PLAY_PREV', (msg)=> {
            this.playNext('prev')
        });
        Pubsub.subscribe('PLAY_NEXT', (msg)=> {
            this.playNext()
        });
    },
    //在部件销毁时候解绑事件
    componentWillUnMount(){
        Pubsub.unsubscribe('DELETE_MUSIC');
        Pubsub.unsubscribe('PLAY_MUSIC');
        Pubsub.unsubscribe('PLAY_PREV');
        Pubsub.unsubscribe('PLAY_NEXT');
        $("#player").unbind($.jPlayer.event.ended);
    },
    render(){
        return (
            <div>
                <Header />
                {React.cloneElement(this.props.children, this.state)}
            </div>
        );
    }
});
let Root = React.createClass({
    render(){
        return (
            <Router history={hashHistory}>
                <Route path="/" component={App}>
                    <IndexRoute component={Player}></IndexRoute>
                    <Route path="/list" component={Musiclist}></Route>
                </Route>
            </Router>
        )

    }
});

export default Root;
//
//<Player
//                   currentMusicItem={this.state.currentMusicItem}
//               ></Player>